<nz-layout>
  <nz-layout>
    <nz-content>
      <div nz-row nzType="flex" nzJustify="space-around">
        <div nz-col [nzSm]="12">
          <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="email" id="email">
                <nz-form-explain *ngIf="validateForm.get('email').dirty && validateForm.get('email').errors">The input
                  is
                  not
                  valid E-mail!</nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>Password</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input type="password" id="password" formControlName="password" (ngModelChange)="updateConfirmValidator()">
                <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">Please
                  input
                  your password!</nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>Confirm Password</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input type="password" formControlName="checkPassword" id="checkPassword">
                <nz-form-explain *ngIf="validateForm.get('checkPassword').dirty && validateForm.get('checkPassword').errors">
                  <ng-container *ngIf="validateForm.get('checkPassword').hasError('required')">
                    Please confirm your password!
                  </ng-container>
                  <ng-container *ngIf="validateForm.get('checkPassword').hasError('confirm')">
                    Two passwords that you enter is inconsistent!
                  </ng-container>
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="loginName" nzRequired>
                <span>
                  loginName
                  <nz-tooltip nzTitle="What do you want other to call you">
                    <i nz-tooltip class="anticon anticon-question-circle-o"></i>
                  </nz-tooltip>
                </span>
              </nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input id="loginName" formControlName="loginName">
                <nz-form-explain *ngIf="validateForm.get('loginName').dirty && validateForm.get('loginName').errors">Please
                  input
                  your loginName!</nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="mobile" nzRequired>Phone Number</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['mobile']">
                <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
                  <ng-template #addOnBeforeTemplate>
                    <nz-select formControlName="mobilePrefix" style="width: 70px;">
                      <nz-option nzLabel="+86" nzValue="+86"></nz-option>
                      <nz-option nzLabel="+87" nzValue="+87"></nz-option>
                    </nz-select>
                  </ng-template>
                  <input formControlName="mobile" id="'mobile'" nz-input>
                </nz-input-group>
                <nz-form-explain *ngIf="validateForm.get('mobile').dirty && validateForm.get('mobile').errors">Please
                  input your phone number!</nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <!-- <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="website" nzRequired>Website</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
              <input nz-input id="website" formControlName="website" placeholder="website">
              <nz-form-explain *ngIf="validateForm.get('website').dirty && validateForm.get('website').errors">Please
                input
                website!</nz-form-explain>
            </nz-form-control>
          </nz-form-item> -->
            <!-- <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired>Captcha</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <div nz-row [nzGutter]="8">
                  <div nz-col [nzSpan]="12">
                    <input nz-input formControlName="captcha" id="captcha">
                  </div>
                  <div nz-col [nzSpan]="12">
                  <a  (click)="updateCaptchaUrl()"><img [src]="content" ></a>
                  </div>
                </div>
                <nz-form-explain *ngIf="validateForm.get('captcha').dirty && validateForm.get('captcha').errors">Please
                  input
                  the
                  captcha you got!</nz-form-explain>
                <nz-form-extra>We must make sure that your are a human.</nz-form-extra>
              </nz-form-control>
            </nz-form-item> -->
            <nz-form-item nz-row style="margin-bottom:8px;">
              <nz-form-control [nzSpan]="14" [nzOffset]="6">
                <label nz-checkbox formControlName="agree">
                  <span>I have read the <a>agreement</a></span>
                </label>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item nz-row style="margin-bottom:8px;">
              <nz-form-control [nzSpan]="16" [nzOffset]="6">
                <button nz-button nzType="primary">Register</button>
              </nz-form-control>
            </nz-form-item>
          </form>
        </div>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>